<template>
  <div class="game_background" ref="background">
    <div class="btn_group">
      <button type="button" name="button" class="game_shop" @click="goShop">去道具商城</button>
      <button type="button" name="button" class="game_props">&nbsp;</button> X {{propsNum}}
      <button type="button" name="button" class="game_over" @click="gameOver">退出游戏</button>
    </div>
    <!-- 草 -->
    <div class="grass" v-for="item in grasses" :style="{'left': item.left + 'px', 'bottom': item.bottom + 'px'}"
    @click="shovelGrass(item.left, item.bottom)">
      <img src="../../../../images/grass.gif" alt="">
    </div>
    <!-- 铲子 -->
    <div class="shovel" ref="shovel">
      <img src="../../../../images/shovel.gif" alt="">
    </div>
    <div class="backward" v-if="showBackward">
			<span>{{num}}</span>
		</div>
    <prize-modal :list="list" v-if="result" @close="close" @go-on="goOn" ref="prize"></prize-modal>
  </div>
</template>

<script>
import {useProp, totalProps} from 'src/service/getData3.js'
import { mapState} from 'vuex'
import {Toast} from 'mint-ui'
import PrizeModal from './prize.vue'
export default {
  name: 'scoop-grass',
  components: {
    PrizeModal
  },
  data: () => ({
    num: 4,
    propsNum: 0,
    showBackward: true,
    grasses: [],
    clientWidth: '',
    clientHeight: '',
    game: '',
    list: {},
    result: false
  }),
  computed: {
    ...mapState({
      usrId: state => state.user.userInfo.usrId,
      position: state => state.coupon.position
    }),
    propId() {
      return this.$route.params.id
    }
  },
    created() {
    },
  methods: {
    close() {
      this.result = false
      this.$router.push({
        name: 'home'
      })
    },
    goShop() {
      this.$router.push({
        name: 'shopIndex'
      })
    },
    goOn() {
      this.result = false
      this.queryProps()
      this.game = setTimeout(this.add,500)
    },
    gameOver() {
      clearTimeout(this.game);
      this.$router.push({
        name: 'home'
      })
    },
    shovelGrass(left, bottom) {
      this.$refs.shovel.style.left = left + 'px'
      this.$refs.shovel.style.bottom = bottom + 'px'
      useProp({
        usrId: this.usrId,
        num: 1,
        position: this.position || '121.419243,31.208285',
        propId: this.propId
      }).then(rep => {
        if (rep.respCode === '00') {
          this.result = true
          this.list = rep.content
          this.result = true
          this.$nextTick(() => {
            let bags = this.$refs.prize.bags
            console.log(bags);
            let val = rep.content
            Object.keys(bags).forEach(item => {
              bags[item] = false
            })
            if (val.firstPackage.couponNum && val.couponSearch.length > 0) {
              this.$refs.prize.bags.coupon = true
            } else if (val.firstPackage.propNum) {
              this.$refs.prize.bags.gameProps = true
            } else if (val.firstPackage.yun) {
              this.$refs.prize.bags.yun = true
            }
          })
        } else {
          Toast({
            message: rep.content
          })
        }
      })
      clearTimeout(this.game);
      setTimeout(() => {
        this.grasses = []
      }, 300)
    },
    //倒计时
    backward(num) {
      this.num--
      if (this.num === 0) {
				this.showBackward = false
			}
      setTimeout(this.backward,1000)
    },
    unique () {
      var ret = [];
      this.grasses.forEach(function(item){
          if (ret.indexOf(item) !== -1){
              ret.push(item);
          }
      });
      return ret;
    },
    remove() {
        var len = parseInt(Math.random() * this.grasses.length);
        for (let i = 0; i < 2; i++) {
          this.grasses.splice(i, 1)
        }
    },
    add() {
      var left = parseInt(Math.random() * this.clientWidth);
      var bottom = parseInt(Math.random() * this.clientHeight);
      // 草 width 3rem / height 5rem
      // 计算草的宽度与高度
      let grassWidth
      let grassHeight
      if (this.clientWidth >= 400) {
        grassWidth = 16 * 3
        grassHeight = 16 * 5
      } else if (this.clientWidth >= 360) {
        grassWidth = 16 * 0.94 * 3
        grassHeight = 16 * 0.94 * 5
      } else if (this.clientWidth >= 320) {
        grassWidth = 16 * 0.75 * 3
        grassHeight = 16 * 0.75 * 5
      }
      // 最大底部  和 最大左部
      let forbiddenBot = grassHeight + 60
      let forbiddenLef = grassWidth + 30

      if ((bottom >= 20 && bottom <= this.clientHeight - forbiddenBot) && (left >= 30 && left <= this.clientWidth - forbiddenLef))  {
        if (this.grasses.length >= 4) {
          // 移除之前的草
          this.grasses.shift()
        }
        this.grasses.push({left, bottom})
      }
      this.game = setTimeout(this.add,500);

    },
    queryProps() {
      // 查询用户的道具数量
      totalProps({
        usrId: this.usrId,
        propId: this.propId
      }).then(rep => {
        if (rep.respCode == '00') {
          this.propsNum = rep.content
        } else {
          Toast({
            message: rep.content
          })
        }
      })
    }
  },
  mounted() {
    // 屏幕宽度、高度  游戏区域
    this.clientWidth = document.documentElement.clientWidth
    this.clientHeight = document.documentElement.clientHeight
    this.queryProps()
    // 倒计时
    this.backward(4)
    setTimeout(this.add,3000);
  }
}
</script>
<style>
.ToastClass {
  width: 60%;
}
</style>
<style lang="scss" scoped>
.game_background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../../../../images/game_bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
.btn_group {
  // height: 3rem;
  width: 100%;
  background-color: #222;
  box-shadow: 0 0.7rem 0.7rem rgba(0,0,0,0.5);
  padding: 0.5rem 0.7rem;
  box-sizing: border-box;
  font-size: 1rem;
  color: #646464;
  button {
    height: 2rem;
    box-sizing: border-box;
    padding: 0 1rem;
    line-height: 2rem;
    background-color: #ec4e8a;
    border-radius: .2rem;
    font-size: 1rem;
    color: #fff;
    outline: none;
  }
}
.game_shop {
  background-image: url('../../../../images/shop_icon.gif');
  background-size: 16%;
  background-position: 0.5rem center;
  background-repeat: no-repeat;
  padding-left: 2.2rem!important;
}
.game_props {
  background-image: url('../../../../images/shovel_icon.gif');
  background-size: 60%;
  background-position: 0.5rem center;
  background-repeat: no-repeat;
  padding-left: 1rem!important;
  background-color: #393939!important;
  margin-left: .5rem;
}
.game_over {
  float: right;
  :after {
    content: '';
    display: block;
    clear: both;
  }
}
// @keyframes mymove {
//   from {bottom:-20%;}
//   to {bottom:100%;}
// }
.grass {
  width: 3rem;
  height: 5rem;
  position: absolute;
  bottom: -10rem;
  left: 0;
  animation: all 6s linear;
  animation-fill-mode: forwards;
  img {
    max-width: 100%;
  }
}
.shovel {
  width: 5rem;
  height: 5rem;
  position: absolute;
  left: 40px;
  bottom: 80px;
  img {
    max-width: 100%;
  }
}
.backward{
	width: 100%;
	background:rgba(0,0,0,.97);
	opacity: 0.5;
	position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.backward span{
	display: inline-block;
	color: #fff;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	right: 0;
	bottom: 0;
  width: 5rem;
  height: 5rem;
  text-align: center;
  transform: translate(-50%, -50%);
	font-size: 5rem;
}
</style>
